<template>
  <ul>
    <li v-for="menu in props.data" :key="menu.id">
      <div>
        <el-checkbox v-model="formModel.menuIds[menu.id]" :key="menu.id" @change="menuChange(menu)">
          <template #default>
            <div class="menu">
              <template v-if="menu.menuIcon">
                <Icon :icon="menu.menuIcon" />
              </template>
              {{ t(menu.menuTitle) }}
            </div>
          </template>
        </el-checkbox>
      </div>
      <div class="permission-group" v-if="menu.permissions">
        <el-checkbox
          v-for="permission in menu.permissions"
          v-model="formModel.permIds[permission.id]"
          :key="permission.id"
          @change="permissionChange(permission.id, permission.menuId)"
        >
          <div class="permission">
            {{ t(permission.permName) }}
          </div>
        </el-checkbox>
      </div>
      <wsm-menu v-model="formModel" :data="menu.menus" :root="false" />
    </li>
  </ul>
</template>
<script setup lang="ts">
import { useI18n } from '@/hooks/web/useI18n'
import { AuthorizeFormDataType, MenuType, PermissionType } from '../AuthorizeForm/types'
import { watch } from 'vue'

const { t } = useI18n()

//绑定的v-model
const formModel = defineModel<AuthorizeFormDataType>({
  default: {
    menuIds: {},
    permIds: {}
  }
})
//获取配置参数
const props = defineProps<{
  root: boolean
  data?: MenuType[]
}>()

if (props.data) {
  props.data.forEach((menu: MenuType) => {
    watch(
      () => formModel.value.menuIds[menu.id],
      (val) => {
        if (val) {
          if (props.root) {
            formModel.value.sysIds[menu.sysId] = true
          } else {
            formModel.value.menuIds[menu.parentId] = true
          }
        } else {
          //是否全部关闭
          let allClose = true
          for (let i = 0; i < props.data!.length; i++) {
            const menu = props.data![i]
            if (formModel.value.menuIds[menu.id]) {
              allClose = false
              break
            }
          }
          if (allClose) {
            if (props.root) {
              formModel.value.sysIds[menu.sysId] = false
            } else {
              formModel.value.menuIds[menu.parentId] = false
            }
          }
        }

        //如果是false
        if (val === false) {
          if (menu.menus) {
            menu.menus.forEach((m: MenuType) => {
              closeMenuOrPermission(m)
            })
          }
          if (menu.permissions) {
            menu.permissions.forEach((p: PermissionType) => {
              formModel.value.permIds[p.id] = false
            })
          }
        }
      }
    )
  })
}

const closeMenuOrPermission = (menu: MenuType) => {
  formModel.value.menuIds[menu.id] = false
  if (menu.permissions) {
    menu.permissions.forEach((p: PermissionType) => {
      formModel.value.permIds[p.id] = false
    })
  }
}

//打开所有子节点
const openChildMenuOrPermission = (menu: MenuType) => {
  formModel.value.menuIds[menu.id] = true
  if (menu.permissions) {
    menu.permissions.forEach((p: PermissionType) => {
      formModel.value.permIds[p.id] = true
    })
  }
}

//菜单点击事件
const menuChange = (menu: MenuType) => {
  const check = formModel.value.menuIds[menu.id]
  if (check === true) {
    if (menu.menus) {
      menu.menus.forEach((m: MenuType) => {
        openChildMenuOrPermission(m)
      })
    }
    if (menu.permissions) {
      menu.permissions.forEach((p: PermissionType) => {
        formModel.value.permIds[p.id] = true
      })
    }
  }
}
//权限点击事件
const permissionChange = (id: string, menuId: string) => {
  if (formModel.value.permIds[id]) {
    formModel.value.menuIds[menuId] = true
  }
}
</script>
<style scoped>
ul {
  list-style-type: none;
  margin-left: -20px;
}

.menu {
  color: rgb(0, 125, 209);
}

.permission {
  color: red;
}
.permission-group {
  margin-left: 25px;
}
</style>
